<!--
1. 进入动画
    1. v-enter 动画进入之前的初始状态
    2. v-enter-active 动画进入的时间段
    3. v-enter-to 动画进入之后的结束状态
2. 离开动画
    1. v-leave 动画离开前的状态
    2. v-leave-active 动画离开时的状态
    3. v-leave-to 动画离开后的状态
3. v-enter-to 和 v-leave 的状态是相同的。

4. 制作动画
    1. 使用 transition 元素 ，把需要被动画控制的元素包裹起来。
    2. 自定义两组样式，来控制 transition 内部的元素实现动画
    3. 设置 几种动画状态的css样式
    4. 这样一来，transition 中的元素就有动画效果了
5.

-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <style>
        .v-enter, .v-leave-to{
            opacity: 0;
            transform: translateX(80px);
        }
        .v-enter-active, .v-leave-active{
            transition: all 0.4s ease;
        }


    </style>
</head>
<body>
    <div id="app">
        <button @click="toggle">toggle</button>
        <transition>
            <h3 v-show="flag">Hello Job!</h3>
        </transition>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                flag:false
            },
            methods:{
                toggle() {
                    this.flag=!this.flag;
                }
            }
        })
    </script>
</body>
</html>